<!--
 * @Author: giteezr 2250368646@qq.com
 * @Date: 2024-01-05 15:51:51
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2024-02-21 10:54:35
 * @FilePath: \vue3+nodeJs\houtaiguanli\management-system\src\views\sweepercar\global\components\chlidren\baiduMapBox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <dv-border-box-1
    backgroundColor="rgba(5, 29, 53, 0.9)"
    class="dv-border-box-1"
  >
    <div id="mapBox" ref="mapBox"></div>
  </dv-border-box-1>
</template>
  <script setup  lang="ts">
import { onMounted, ref } from "vue";
import BMapGL from "BMapGL"; // 导入百度地图API
// import mapvgl from "mapvgl"; // 导入百度地图API
import baiduMapBox from "./baiduMapBox.json";
// import imgUrl from "@/assets/images/sweepercar/pile.png";
import startmark from "@/assets/images/sweepercar/startmark.png";
import endmark from "@/assets/images/sweepercar/endmark.png";
import carImgOrange from "@/assets/images/sweepercar/carImgOrange.png";
import carImgGray from "@/assets/images/sweepercar/carImgGray.png";
import carImgRed from "@/assets/images/sweepercar/carImgRed.png";
import { getRoadStakeNumInfosByRoadId } from "@/api/sweepercar/global";
import { getMusic } from "@/api/music";
import { ElMessage } from "element-plus";
// console.log(baiduMapBox);
let mapBox = ref(); //ref的应用
onMounted(() => {
  mapBox = mapBox.value;
  // console.log(mapBox);
  getCarClick();
});

// console.log(baiduMapBox.styleJson);
let mapStyle = baiduMapBox.styleJson;
let center = { lng: 113.02781, lat: 23.679344 };
let zoom = 11;
var map: any;
var pl: any;
let trackAni: any;
var carData = {};
// 查询车辆数据
const getCarClick = async () => {
  const res = await getRoadStakeNumInfosByRoadId();
  const { status, message } = res;
  if (status === 0) {
    carData = res.data;
    ElMessage.success("地图数据查询成功！");
    handleMapReady(carData);
  } else {
    ElMessage.error("查询失败！" + message);
  }
};
let handleMapReady = (carData: any) => {
  // 创建Map实例
  map = new BMapGL.Map("mapBox");
  map.centerAndZoom(new BMapGL.Point(center.lng, center.lat), zoom); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  // map.setMapStyleV2({styleJson: mapStyle}); // 修改地图主题色;
  // map.setTrafficOn(); // 叠加路况图层
  if (carData && carData.cardevicegpsstatusresplist) {
    // 打点
    let arr =
      carData.cardevicegpsstatusresplist.length > 0
        ? carData.cardevicegpsstatusresplist
        : [];
    arr.forEach((x: any) => {
      markerClick(x);
    });
    // 画线
    let brr: any =
      carData.roadinfoentitylist.length > 0 ? carData.roadinfoentitylist : [];
    brr.forEach((x: any) => {
      PolylineClick(x);
    });
  }
};
let markerClick = (markerObj: any) => {
  // 车辆打点
  var point = new BMapGL.Point(markerObj.lng, markerObj.lat);
  let icon =
    markerObj.devices_status === 2
      ? carImgGray
      : markerObj.devices_status === 0
      ? carImgRed
      : carImgOrange;
  var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(26, 52), {
    anchor: new BMapGL.Size(10, 25),
    // imageOffset: new BMapGL.Size(0, - 20), // 设置图片偏移
  });
  var marker = new BMapGL.Marker(point, {
    icon: myIcon,
    strokeWeight: 7,
    strokeOpacity: 1,
  });
  map.addOverlay(marker);
};
let PolylineClick = (polylineObj: any) => {
  var point = JSON.parse(polylineObj.allloglat);

  pl = new BMapGL.Polyline(point, {
    strokeColor:
      polylineObj.avgScore > 90
        ? "#00FF7F"
        : polylineObj.avgScore > 60 && polylineObj.avgScore <= 70
        ? "#FFA500"
        : polylineObj.avgScore > 70 && polylineObj.avgScore <= 80
        ? "#FFFF00"
        : polylineObj.avgScore > 80 && polylineObj.avgScore <= 90
        ? "#85D415"
        : "#FF0000",
    title: polylineObj.roadName,
    strokeWeight: 7,
    // strokeOpacity: 1,
  });
  start();

  map.addOverlay(pl);
};
function start() {
  trackAni = new BMapGLLib.TrackAnimation(map, pl, {
    overallView: true,
    tilt: 30,
    // duration: 20000,
    delay: 300,
  });
  // trackAni.start();
}
</script>
  <style scoped lang="less">
  /deep/ .border-box-content {
    padding: 1rem;
   
    #mapBox {
  width: 100%; border-radius: 2rem;
  height: 100%;
}
  }

</style>


